<template>
  <div style="">
    <div class="honor">
      <ul>
        <li @click="$router.push('/works')">作品</li>
        <li @click="$router.push('/album')">专辑</li>
        <li @click="$router.push('/collection')">收藏</li>
        <li @click="$router.push('/profile')">资料</li>
        <li @click="$router.push('/honor')" style="color: rgb(70, 210, 51)">
          荣誉
        </li>
      </ul>
    </div>
    <div style="background-color: rgb(239, 239, 245)" class="content">
      <div class="content_div1">
        <i class="el-icon-star-on"></i>
        <p>勋章作品</p>
        <i class="el-icon-star-on"></i>
      </div>
      <div class="content_div2">
        <div>
          暂无勋章作品
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import navBar from "@/components/navBa.vue";
export default {
  components: {
    navBar,
  },
  data() {
    return {};
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
  mounted() {},
};
</script>
<style scoped lang="less">
.honor {
  padding: 30px;
  background-color: white;
  border-top: 3px solid rgb(238, 238, 238);
  border-bottom: 1px solid rgb(238, 238, 238);
  ul {
    width: 800px;
    list-style: none;
    margin-left: 15%;
    li {
      font-size: 14px;
      position: relative;
      top: -20px;
      left: 30%;
      float: left;
      margin-left: 40px;
    }
  }
  div {
    span {
      font-size: 1px;
    }
  }
}
.content {
  width: 100%;
  .content_div1::after{
    display: block;
    content: "";
    clear: both;
  }
  .content_div1 {
    margin-left: 40%;
    color: rgb(70, 210, 51);
    i {
      float: left;
      margin: 35px 40px;
    }
    p {
      font-size: 25px;
      float: left;
    }
  }
 .content_div2{
   div{
     padding-bottom: 40px ;
   }
 }
}
</style>